const { src , dest , parallel, series, watch} = require("gulp")
// 删除
const del = require("del")

// 热更新服务器
const browserSync = require("browser-sync")


// 加载所有插件
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()
// 样式插件
// const plugins.sass = require("gulp-sass")

// 脚本插件
// const plugins.babel = require("gulp-babel")

// 模板插件
// const plugins.swig = require("gulp-swig")

// 图片插件
// const plugins.imagemin = require("gulp-imagemin")

// 创建一个服务器
const bs = browserSync.create();
const serve = () => {
  watch("src/assets/styles/*.scss",style);//监视scss
  watch("src/assets/scripts/*.js",script);//监视js
  watch("src/*.html",page);               //监视html
  // watch("src/assets/images/**",image);
  // watch("src/assets/fonts/**",font);
  // watch("public/**",extra);
  watch([
    "src/assets/images/**",
    "src/assets/fonts/**",
    "public/**"
  ], bs.reload)           //监视静态资源更新页面
  bs.init({
    open : true,          //是否自动打开浏览器页面
    notify: true,         //右上角提示配置
    port: 2080,           //端口号设置
    files: "dist/**",     //热更新 配合 gulp的watch使用
    // 核心
    server:{
      // 根目录
      baseDir: ["temp","src","public"],
      // 将对于/node_modules开头的王爷请求 都知道一个目录下面去
      routes:{
        "/node_modules":"node_modules"
      }
    }
  })
}

const style = ()=>{
  return src("src/assets/styles/*.scss",{base: "src"})
          .pipe(plugins.sass({outputStyle:"expanded"})) //完全展开{}
          .pipe(dest("temp")) //转换到临时文件
          // .pipe(bs.reload({ stream: true}))
}

const script = () =>{
  return src("src/assets/scripts/*.js",{base: "src"})
          .pipe(plugins.babel({ presets:["@babel/preset-env"]}))//设置环境预设
          .pipe(dest("temp")) //转换到临时文件
          // .pipe(bs.reload({ stream: true}))
}

const page =()=>{
  return src("src/*.html", {base : "src"})
          .pipe(plugins.swig({ "cache" :  false })) //取消缓存 html模板热更新时会有问题
          .pipe(dest("temp")) //转换到临时文件
          // .pipe(bs.reload({ stream: true}))
}

const image = ()=>{
  return src("src/assets/images/**",{ base : "src"})
          .pipe(plugins.imagemin())
          .pipe(dest("dist"))
}

const font = ()=>{
  return src("src/assets/fonts/**",{ base : "src"})
          .pipe(plugins.imagemin())
          .pipe(dest("dist"))
}

const extra = () => {
  return src("public/**",{ base: "public"})
          .pipe(dest("dist"))
}

const clean = () =>{
  return del(["dist"])
}

const useref= () => {
  return src("temp/*.html", {base : "temp" })
          .pipe(plugins.useref({ searchPath: [ "dist" , "." ] }))
          .pipe(plugins.if(/\.js$/,plugins.uglify()))     //压缩引入文件js
          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))  //压缩引入文件css
          .pipe(plugins.if(/\.html$/,plugins.htmlmin({ 
            collapseWhitespace: true, //压缩html空格
            minifyCSS: true,  //压缩html中css
            minifyJS: true    //压缩html中js
          })))
          .pipe(dest("dist"))
}


const compile = parallel(style, script, page)
const build = series(clean,parallel(series(compile,useref) , image, font, extra))
const develop = series(compile, serve)
module.exports={
  build,
  clean,
  develop,
}